<!--需要审批-->
<template>
  <div>
    <div id="index">
      <el-space wrap :size="20" style="margin-bottom: 10px;width: 90%;text-align: left">
        <el-card :body-style="{ padding: '0px'}" shadow="hover" v-for="(t) in formDatas" style="width: 250px;border-radius: 20px">
          <el-image style="height: 110px;width: 100%" :src="'http://127.0.0.1:3000/'+ t.path" fit="fill"/>
          <div style="padding: 5px">
            <span>{{ t.name }}</span>
            <!-- 弹窗按钮 -->
            <div class="bottom">
              <span>{{ t.meaning }}</span>
              <el-button type="text" icon="more-filled" style="color: black" v-on:click="dialog(t)"></el-button>
            </div>
          </div>
        </el-card>
      </el-space>

      <el-dialog
          title="申报详情"
          v-model="dialogFormVisible"
          width="35%"
          center
      >
        <el-form
            :model="form"
            label-position="top"
            style="display: inline-block"
        >
          <el-form-item label="项目名称">
            <el-input v-model="form.name" disabled/>
          </el-form-item>
          <el-form-item label="项目概述">
            <el-input v-model="form.meaning" disabled/>
          </el-form-item>
          <el-form-item label="参赛队伍">
            <el-input v-model="form.team" disabled/>
          </el-form-item>
          <el-form-item label="参赛队伍所属系部">
            <el-input v-model="form.major" disabled/>
          </el-form-item>
          <el-form-item v-if="form.file" label="项目申报书">
            <el-button type="text" @click="show">
              点击查看
            </el-button>
          </el-form-item>
          <el-form-item label="是否通过" prop="result">
            <el-select v-model="form.result" placeholder="是否通过">
              <el-option label="通过" value="yes"/>
              <el-option label="不通过" value="no"/>
            </el-select>
          </el-form-item>
          <el-form-item label="添加建议">
            <el-input
                type="textarea"
                v-model="form.message"
                placeholder="请填写建议，不超过500字"
            ></el-input>
          </el-form-item>
        </el-form>
        <el-dialog
            v-model="innerVisible"
            width="80%"
            title="项目申报书"
            append-to-body
        >
          <div ref="file"></div>
        </el-dialog>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submit()">提交</el-button>
          </span>
        </template>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[1, 3, 5, 10]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          style="justify-content: center"
      />
    </div>
  </div>
</template>

<script>
import axios from "axios";
import moment from "moment";
const docx = require('docx-preview');
window.JSZip = require('jszip')

export default {
  data() {
    return {
      formDatas: {},
      form: {
        id: "",
        name: "",
        team: "",
        major: "",
        file:'',
        result: "",
        team_id:'',
        meaning:'',
        message:''
      },
      innerVisible:false,
      dialogFormVisible: false,
      currentPage: 1,
      pageSize: 5,
      total: 10,
      small: false,
      background: true,
      disabled: false,
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    submit() {
      axios.post("/project/examine", {
        team_id:this.form.team_id,
        id:this.form.id,
        result:this.form.result,
      }).then((res) => {
        let r = res.data;
        alert(r.msg)
        if (this.form.message != null){
          axios.post("/project/addMessage", {
            id:this.form.id,
            content:this.form.message
          }).then((res) => {
            let r = res.data;
            alert(r.msg)
          }).catch((err) => {
            console.log(err);
          })
        }
        location.reload();
      }).catch((err) => {
        console.log(err);
      });
    },
    handleSizeChange(val) {
      axios.post("/project/check", {
        page: this.currentPage,
        pageSize: val,
      }).then((res) => {
        let r = res.data;
        this.total = r.total;
        this.formDatas = r.datas;
      }).catch((err) => {
        console.log(err);
      });
    },
    handleCurrentChange(val) {
      axios.post("/project/check", {
        page: val,
        pageSize: this.pageSize,
      }).then((res) => {
        let r = res.data;
        this.total = r.total;
        this.formDatas = r.datas;
      }).catch((err) => {
        console.log(err);
      });
    },
    dialog: function (t) {
      this.form = t;
      this.dialogFormVisible = true;
    },
    show(){
      axios.get('/file' +  this.form.file.substring(13),{
        responseType: 'blob', // 设置响应文件格式
      }).then(({data}) => {
        docx.renderAsync(data,this.$refs.file) // 渲染到页面预览
      })
      this.innerVisible = true
    }
  },
  mounted() {
    this.handleCurrentChange(1);
  },
};
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom span {
  font-size: 13px;
  color: #999;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#index{text-align: center}
</style>
<style>
.el-dialog--center .el-dialog__body {
  text-align: center;
}
</style>
